<template>
    <div class="sc-form-table" ref="scFormTableRef">
        <el-table :data="data" ref="tableRef" border stripe>
            <el-table-column type="index" width="50" fixed="left">
                <template #header>
                    <el-button v-if="!props.hideAdd" type="primary" icon="el-icon-plus" size="small" circle
                        @click="rowAdd"></el-button>
                </template>
                <template #default="scope">
                    <div :class="['sc-form-table-handle', { 'sc-form-table-handle-delete': !props.hideDelete }]">
                        <span>{{ scope.$index + 1 }}</span>
                        <el-button v-if="!props.hideDelete" type="danger" icon="el-icon-delete" size="small" plain circle
                            @click="rowDel(scope.row, scope.$index)"></el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="" width="50" v-if="props.dragSort">
                <template #default>
                    <div class="move" style="cursor: move;"><el-icon-d-caret style="width: 1em; height: 1em;" /></div>
                </template>
            </el-table-column>
            <slot></slot>
            <template #empty>{{ placeholder }}</template>
        </el-table>
    </div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue';
import i18n from '@/locales';
import Sortable from 'sortablejs';
// 定义组件的 props
const props = defineProps({
    modelValue: { type: Array, default: () => [] },
    addTemplate: { type: Object, default: () => { } },
    placeholder: { type: String, default: i18n.global.t('common.noData') },
    dragSort: { type: Boolean, default: false },
    hideAdd: { type: Boolean, default: false },
    hideDelete: { type: Boolean, default: false },
});
// 定义可以发出的事件
const emit = defineEmits(['update:modelValue']);
// 定义组件的 ref
const scFormTableRef = ref(null);
const tableRef = ref(null);
// 定义响应数据
const data = ref([]);
// 组件挂载时的逻辑
onMounted(() => {
    data.value = props.modelValue;
    // 如果启用了拖拽排序，则初始化Sortable
    if (props.dragSort) rowDrop();
});
// 监视 modelValue prop 的变化
watch(() => props.modelValue, (newValue) => {
    data.value = newValue;
}, { deep: true });
// 监视 data 的变化并发出更新事件
watch(data, () => {
    emit('update:modelValue', data.value);
}, { deep: true });
// 初始化行拖拽排序
const rowDrop = () => {
    const tbody = tableRef.value.$el.querySelector('.el-table__body-wrapper tbody');
    Sortable.create(tbody, {
        handle: ".move",
        animation: 300,
        ghostClass: "ghost",
        onEnd({ newIndex, oldIndex }) {
            data.value.splice(newIndex, 0, data.value.splice(oldIndex, 1)[0]);
            const newArray = data.value.slice(0);
            const tmpHeight = scFormTableRef.value.offsetHeight;
            scFormTableRef.value.style.setProperty('height', tmpHeight + 'px');
            data.value = [];
            nextTick(() => {
                data.value = newArray;
                nextTick(() => {
                    scFormTableRef.value.style.removeProperty('height');
                });
            });
        }
    });
};
// 添加新行
const rowAdd = () => {
    const temp = JSON.parse(JSON.stringify(props.addTemplate));
    data.value.push(temp);
};
// 删除指定行
const rowDel = (row, index) => {
    data.value.splice(index, 1);
};
// 添加指定行
const pushRow = (row) => {
    const temp = row || JSON.parse(JSON.stringify(props.addTemplate));
    data.value.push(temp);
};
// 删除指定索引的行
const deleteRow = (index) => {
    data.value.splice(index, 1);
};
</script>
<style scoped>
	.sc-form-table {width: 100%;}
	.sc-form-table .sc-form-table-handle {text-align: center;}
	.sc-form-table .sc-form-table-handle span {display: inline-block;}
	.sc-form-table .sc-form-table-handle button {display: none;}
	.sc-form-table .hover-row .sc-form-table-handle-delete span {display: none;}
	.sc-form-table .hover-row .sc-form-table-handle-delete button {display: inline-block;}
	.sc-form-table .move {text-align: center;font-size: 14px;margin-top: 3px;}
</style>